<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>图层蒙版</title>
    <link rel="stylesheet" href="./masks.css" type="text/css">
</head>
<body>
    <script>
        var isUp = true
        function changeClass(el) {
            if (isUp) {
                el.className = 'flip-wrapper is-flipped';
            } else {
                el.className = 'flip-wrapper';
            }
        isUp = !isUp
      }
    </script>
    
    <!--蒙版效果演示-->
    <h5>鼠标移上去</h5>
    <div class="overlay-container" style="width: 150px;height: 150px;">
        <img class="coverd" style="width: 150px;height: 150px;" src="./image/mask.png" alt="msg">
        <div class="overlap">这是蒙版</div>
    </div>
    
    <!-- 3D翻转效果演示-->
    <h5>点击图片区域</h5>
    <div class="flip-wrapper" style="width: 200px;height: 200px;" onclick="changeClass(this)">
        <div class="flip-img">
            <img class="coverd" style="width: 200px;height: 200px;" src="./image/mask.png" alt="msg">
        </div>
        <div class="flip-mask">
            <h1>这是蒙版</h1>
        </div>
    </div>
</body>
</html>